<template>
  <div class="padding">
<!--    <p>当前选中表为: {{ (tableMeta && tableMeta.table) ? tableMeta.table.actualTableName.tableName: '未选中表, 请点击左侧进行操作'}}  <span v-if="tableOperator.dataCount !== -1"> 表数据量: {{tableOperator.dataCount}}</span></p>-->
    <div>
      <p><b>连接: </b>{{connName}}</p>
      <p>
        <b>数据表: </b>{{tableMeta && tableMeta.table ? tableMeta.table.actualTableName.fullName : '未选中表, 请点击左边表格行后操作'}}
        <span v-if="tableOperator.dataCount !== -1"> <b>数据量:</b> {{tableOperator.dataCount}}</span>
      </p>
    </div>
    <el-tabs tab-position="top"  :active-name="tabs.activeTabName" @tab-click="switchTab">
      <el-tab-pane label="字段" name="columns">
        <template v-if="tableMeta">
          <el-table
            :data="tableMeta.columns"
            border
            stripe
            style="width: 100%"
            height="500"
            size="mini"
          >
            <el-table-column
              type="index"
              width="50"
            />
            <el-table-column
              prop="columnName"
              label="列名"
              width="200"
            />
            <el-table-column
              label="必填"
              width="50"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.nullable ? 'N':'Y' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="类型"
              width="170"
            >
              <template slot-scope="scope">
                <span>{{ showTableColumnType(scope.row) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="注释"
            />
          </el-table>
        </template>
      </el-tab-pane>
      <el-tab-pane label="索引" name="indices">
        <el-table
          :data="indices"
          border
          stripe
          style="width: 100%"
          size="mini"
        >
          <el-table-column
            type="index"
            width="50"
          />
          <el-table-column
            prop="indexName"
            label="索引名称"
            width="200"
          />
          <el-table-column
            prop="columnName"
            label="列名"
            width="150"
          />
          <el-table-column
            label="索引类型"
          >
            <template slot-scope="scope">
              <span>{{ showIndexType(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ordinalPosition"
            label="顺序"
          />
          <el-table-column
            label="unique"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.unique }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="表标记" name="tag">
        <el-button  :disabled="!tableMeta || !connName"  size="small" type="text" icon="el-icon-setting"  @click="tableMarkDialog.visible = true">配置</el-button>
        <el-row class="margin-top">
          <el-col>
            <el-tag size="medium" v-for="tag in tableMarkDialog.tableTags" :key="tag" class="margin-left" type="" @close="dropTag">{{tag}}</el-tag>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="表关系" name="relation">
        <el-button-group>
          <el-button size="small" type="text" icon="el-icon-bottom" :disabled="relationType === 'hierarchy'" @click="hierarchy">hierarchy</el-button>
          <el-button size="small" type="text" icon="el-icon-top" :disabled="relationType === 'superTypes'" @click="superTypes">superTypes</el-button>
          <el-button class="margin-left" size="small" type="text" icon="el-icon-setting" @click="configTableRelation">config</el-button>
        </el-button-group>
        <el-tree ref="relation" :data="relations" :default-expand-all="true" />
      </el-tab-pane>
      <el-tab-pane label="表操作" name="operator">
        <el-button-group >
          <el-button :disabled="!tableMeta || !connName" type="white" size="small" @click="loadTableDataTotal" icon="el-icon-view">表数据量</el-button>
          <el-button :disabled="!tableMeta || !connName" type="white" size="small" @click="emptyTable" icon="el-icon-delete">清空表</el-button>
          <el-button :disabled="!tableMeta || !connName" type="white" size="small" icon="el-icon-refresh" @click="refreshMeta">更新元数据</el-button>
        </el-button-group>
      </el-tab-pane>
    </el-tabs>

    <!-- 表标记配置 -->
    <el-dialog :visible.sync="tableMarkDialog.visible" :title="tableMarkDialog.title">
      <el-row>
        <el-col :span="24">
          <el-transfer
            v-model="tableMarkDialog.tableTags"
            :data="tagsComputed"
            :titles="['标签库','选中的标签']"
          />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="storeTableTags">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 表关系配置 -->
    <el-dialog :visible.sync="tableRelationDialog.visible" :title="tableRelationDialog.title">
      <table-relation-map :conn-name="connName" :table-meta="tableMeta" />
    </el-dialog>
  </div>
</template>

<script>

import database from '@/api/database'

import TableRelationMap from '@/views/database/TableRelationMap'

export default {
  name: 'TableProperties',
  components: {TableRelationMap},
  props: {
    tableMeta: {
      type:Object
    },
    connName: String
  },
  data(){
    return {
      indices: [],
      primaryKeys: [],
      relations: [],
      relationType: 'hierarchy',
      tabs: {
        activeTabName: 'columns',
      },
      tableMarkDialog: {
        visible: false,
        title: '表标记',
        tags: [],
        tableTags: []
      },
      tableRelationDialog: {
        visible: false,
        title: '表关系'
      },
      tableOperator: {
        dataCount: -1
      }
    }
  },
  methods: {
    refreshMeta(){
      database.refreshTable(this.connName,this.tableMeta.table.actualTableName).then(res => {
        this.tableMeta = res.data;
      })
    },
    loadTableDataTotal() {
      let tableInfo = this.tableMeta.table.actualTableName;
      database.executeQuery(this.connName, tableInfo.namespace,'select count(*) from ' + tableInfo.tableName).then(res => {
        this.tableOperator.dataCount = -1;
        if (res.data && res.data.length > 0) {
          const data0 = res.data[0]
          const col = data0.headers[0].columnName
          this.tableOperator.dataCount = data0.rows[0][col] + ''
        }
      })
    },
    emptyTable() {
      const actualTableName = this.tableMeta.table.actualTableName
      this.$confirm('确定清空数据表 ' + actualTableName.tableName + ' 此操作不可逆?', '警告', { type: 'warning' }).then(() => {
        database.emptyTable(this.connName, actualTableName).then(res => {
          this.$message('清除成功')
        })
      }).catch(() => {})
    },
    storeTableTags() {
      const actualTableName = this.tableMeta.table.actualTableName
      const params = { actualTableName: actualTableName, tags: this.tableMarkDialog.tableTags }
      database.markTag(this.connName,[params]).then(res => {
        this.tableMarkDialog.visible = false
        this.tags = this.tableMarkDialog.tableTags;
      })
    },
    dropTag(tag){

    },
    showTableColumnType(row) {
      let columnSize = '(' + row.columnSize + ')'
      if (row.decimalDigits) {
        columnSize = '(' + row.columnSize + ',' + row.decimalDigits + ')'
      }
      return row.typeName + columnSize
    },
    switchTab(tab, event){
      this.tabs.activeTabName = tab.name;
      if (this.tableMeta && this.tableMeta.table){
        switch (tab.name){
          case 'indices':
            database.indices(this.connName,this.tableMeta.table.actualTableName).then(res => {
              this.indices = res.data;
            })
            break
          case 'tag':
            database.tableTags(this.connName,this.tableMeta.table.actualTableName).then(res => {
              this.tags = res.data;
              this.tableMarkDialog.tableTags = res.data;
            })
            break;
          case 'relation':
            this.hierarchy();
            break;

        }
      }

    },

    hierarchy(){
      this.relationType = 'hierarchy';
      database.hierarchy(this.connName,this.tableMeta.table.actualTableName).then(res => {
        this.relations = [res.data];
      })
    },
    superTypes(){
      this.relationType = 'superTypes';
      database.superTypes(this.connName,this.tableMeta.table.actualTableName).then(res => {
        this.relations = [res.data];
      })
    },
    configTableRelation(){
      this.tableRelationDialog.visible = true
    },
    cleanLastTableData(){
      this.tableOperator.dataCount = -1;
      this.tableMeta = null;
    },
    activeCurrentTab(){
      // 清空表数量数据
      this.tableOperator.dataCount = -1;

      this.switchTab({name: this.tabs.activeTabName})
    },
    showIndexType(row) {
      switch (row.indexType) {
        case 0:
          return 'tableIndexStatistic'
        case 1:
          return 'tableIndexClustered'
        case 2:
          return 'tableIndexHashed'
        case 3:
          return 'BTree'
      }
      return 'unknow'
    }
  },
  computed: {
    tagsComputed() {
      if (this.tableMarkDialog.tags) {
        return this.tableMarkDialog.tags.map(item => ({ key: item, label: item }))
      }
      return []
    }
  },
  mounted() {
    // 加载可以选择的表标记
    database.tags().then(res => {
      this.tableMarkDialog.tags = res.data
    })
  }
}
</script>


